<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>淡入淡出轮播图</title>
    <style type="text/css">
        ul {
            list-style: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        #ads {
            width: 590px;
            height: 250px;
            border: 15px solid #999;
            margin: 20px auto;
            position: relative;
        }

        #ads img {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        #ads img.show {
            display: block;
        }

        #ads ul {
            position: absolute;
            bottom: 10px;
            left: 240px;
        }

        #ads ul li {
            width: 12px;
            height: 12px;
            float: left;
            background: rgba(255, 255, 255, 0.7);
            margin-right: 8px;
            border-radius: 50%;
            cursor: pointer;
        }

        #ads ul li.active {
            background: orange;
        }
    </style>
    <script type="text/javascript" src="assets/jquery-3.3.1.min.js"></script>
</head>

<body>
    <div id="ads">
        <img src="img/img_1.jpg" alt="" class="show" />
        <img src="img/img_2.jpg" alt="" />
        <img src="img/img_3.jpg" alt="" />
        <img src="img/img_4.jpg" alt="" />
        <img src="img/img_5.jpg" alt="" />
        <img src="img/img_6.jpg" alt="" />
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script type="text/javascript">
        $(function () {
            var timer;
            var cur = 0;
            var len = $("#ads li").length;
            //定义图片切换函数
            function showImg() {
                timer = setInterval(function () {
                    cur++;
                    if (cur >= len) {
                        cur = 0;
                    }
                    $("#ads img").eq(cur).fadeIn(2000).siblings("img").fadeOut(2000);
                    $("#ads li").eq(cur).addClass("active").siblings("li").removeClass("active");
                }, 2000);
            }
            showImg();
        });
    </script>
</body>

</html>